<template>
	<view class="detail">
		<view class="searchBar">
			<view class="top" >
				<image class="back" src='../../../static/my/back.png' mode="" @click="toIndex()"></image>
				<text >{{name}}</text>
			</view>
			
		</view>
		<img referrerPolicy="no-referrer" :src="detail.picPath" mode="" ></img>
		<!-- <img referrerPolicy="no-referrer" :src="detail.picPath" mode="" @error="imageError($event, detail)"></img> -->
		<!-- <img  referrerPolicy="no-referrer"  :src="detail.picPath" @error="imageError($event, detail)" ></img> -->
		<view class="content" >
			<view class="content_detail">
				<view class="content_title" v-if="detail.title">{{detail.title}}</view>
				<text class="time" > {{detail.createTime}}</text>
				<rich-text v-if="detail.content" :nodes="content?content:detail.content"></rich-text>
				<view class="footer">
					<view class="give giveLive" @click="toTag(detail.id,detail.tags)">
						
						<image class="icon-zanpress" src="../../../static/fonts/zan.png" v-if="!clickLike"></image>
						<image class="icon-dianzan-active" src="../../../static/fonts/zan-filter.png" v-else></image>
						<text>{{likeNum == null? 0 : likeNum}}</text>
					</view>
					<view class="give giveTread" @click="toDisLike(detail.id,detail.dislike)">
						
						<image class="icon-diancai" src="../../../static/fonts/cai.png" v-if="!clickTread"></image>
						<image class="icon-diancai-active" src="../../../static/fonts/cai-filter.png" v-else></image>
						<text>{{disLikeNum ==null? 0 : disLikeNum}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {getAllCase,queryCaseId,caseLikeNume,caseDislikeNum} from '@/api/case/case.js'
	import {timestampToDataByLine} from '../../../utils/formatDate.js'
	import baseUrl from '@/utils/env.js'
	export default {
		data() {
			return {
				data:{},
				detail:{},
				clickLike:null,
				clickTread:null,
				likeNum:null,
				disLikeNum:null,
				origin:null,
				content:null,
				name:''
			}
		},
		methods: {
			//图片加载不显示，显示默认图片
			imageError(e, detail) {
			    detail.picPath = '../../../static/fonts/zanwu.png';
			},
			toIndex(){
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			
			//对富文本中的图片显示限制大小
			replaceDetail(details){
				var texts='';//待拼接的内容
				while(details.indexOf('<img')!=-1){//寻找img 循环
					texts+=details.substring('0',details.indexOf('<img')+4);//截取到<img前面的内容
					details = details.substring(details.indexOf('<img')+4);//<img 后面的内容
					if(details.indexOf('style=')!=-1 && details.indexOf('style=')<details.indexOf('>')){
						texts+=details.substring(0,details.indexOf('style="')+7)+"max-width:100%;max-height:272px;margin:0 auto;";//从 <img 后面的内容 截取到style= 加上自己要加的内容
						details=details.substring(details.indexOf('style="')+7); //style后面的内容拼接
					}else{
						texts+=' style="max-width:100%;height:auto;margin:0 auto;" ';
					}
				}
				texts+=details;//最后拼接的内容
				return texts
			},
			//根据id查询案例
			queryCase(data){
				var pamas = {
					id : data
				}
				queryCaseId(pamas).then(res=>{
					this.detail= res.data
					// this.detail.content = res.data.content
					this.detail.picPath = baseUrl.replace('api','resource/')+this.detail.picPath
					this.detail.content = this.replaceDetail(this.detail.content)
					this.likeNum = res.data.tags
					this.disLikeNum = res.data.dislike
					this.clickLike = res.data.isTags
					this.clickTread = res.data.isDislike
					console.log(res,'detail')
					this.detail.createTime  = timestampToDataByLine(this.detail.createTime)
					// console.log(this.detail,'this.detail')
					this.name = this.detail.title
					
				})
			},
			//点赞
			toTag(id,count){
				if(count == null){
					count =0
				}
				if(count>=0){
					var data={
						id: id,
						count:count,
						isTags:this.clickLike
					}
					//点赞
					if(this.clickLike==false){
						// console.log(uni.getStorageSync("token"),'点赞,判断token')
						if(uni.getStorageSync("token")){
							this.clickLike = true
							data.count = count+1
							this.likeNum = this.likeNum+1
							data.isTags = this.clickLike
							caseLikeNume(data).then(res=>{
							})
						}else{
							uni.showModal({
							    title: '您还未登录，请先登录',
							    // content: '这是一个模态弹窗',
							    success: function (res) {
							        if (res.confirm) {
							            setTimeout(function () {
							            	uni.navigateTo({
							            		url: '/pages/login/login'
							            	});
							            }, 1000);
							        } else if (res.cancel) {
							            console.log('用户点击取消');
							        }
							    }
							});
						}
						
					}else {
						//取消点赞
						// console.log("取消点赞")
						// if(count>0){
							console.log(uni.getStorageSync("token"),'取消点赞,判断token')
							if(uni.getStorageSync("token")){
								this.clickLike = false
								data.count = count-1
								this.likeNum = this.likeNum-1
								data.isTags = this.clickLike
								caseLikeNume(data).then(res=>{
								})
							}else{
								uni.showModal({
								    title: '您还未登录，请先登录',
								    // content: '这是一个模态弹窗',
								    success: function (res) {
								        if (res.confirm) {
								            setTimeout(function () {
								            	uni.navigateTo({
								            		url: '/pages/login/login'
								            	});
								            }, 1000);
								        } else if (res.cancel) {
								            console.log('用户点击取消');
								        }
								    }
								});
							}
						// }
						
					}
				}
				
				
			},
			//踩一踩
			toDisLike(id,count){
				if(count == null){
					count = 0
				}
				if(count>=0){
					var data={
						id: id,
						count:count,
						isDislike:this.clickTread
					}
					//踩
					if(this.clickTread==false){
						console.log(uni.getStorageSync("token"),'踩一踩,判断token')
						if(uni.getStorageSync("token")){
							this.clickTread = true
							data.count = count+1
							this.disLikeNum = this.disLikeNum+1
							console.log(this.disLikeNum,'this.disLikeNum')
							data.isDislike=this.clickTread
							console.log(data.isDislike,'data.isDislike')
							caseDislikeNum(data).then(res=>{
							})
						}else{
							uni.showModal({
							    title: '您还未登录，请先登录',
							    // content: '这是一个模态弹窗',
							    success: function (res) {
							        if (res.confirm) {
							            setTimeout(function () {
							            	uni.navigateTo({
							            		url: '/pages/login/login'
							            	});
							            }, 1000);
							        } else if (res.cancel) {
							            console.log('用户点击取消');
							        }
							    }
							});
						}
						
					}else{
						//取消踩
						// if(count>0){
							console.log(uni.getStorageSync("token"),'取消踩一踩,判断token')
							if(uni.getStorageSync("token")){
								this.clickTread = false
								data.count = count-1
								this.disLikeNum = this.disLikeNum-1
								data.isDislike=this.clickTread
								caseDislikeNum(data).then(res=>{
								})
							}else {
								uni.showModal({
								    title: '您还未登录，请先登录',
								    // content: '这是一个模态弹窗',
								    success: function (res) {
								        if (res.confirm) {
								            setTimeout(function () {
								            	uni.navigateTo({
								            		url: '/pages/login/login'
								            	});
								            }, 1000);
								        } else if (res.cancel) {
								            console.log('用户点击取消');
								        }
								    }
								});
							}
							
						// }
						
					}
				}
				
			}
		},
		//接收案件页面传递的参数
		onLoad:function(option){
			// this.data = JSON.parse(decodeURIComponent(option.data));
			// this.detail = this.data
			this.queryCase(option.key)
			// this.clickLike = this.detail.isTags
			// this.clickTread = this.detail.isDislike
		}
	}
</script>

<style scoped lang="scss">
	.searchBar{
		width: 100%;
		height: 80rpx;
		padding-top: 50rpx;
		position: fixed;
		top: 0;
		background-color: #F8F8F8;
		.top{
			width: 100%;
			height: 52px;
			line-height: 52px;
			// background-color: #FF4848;
			// border-top: 1px solid #FF4848;
			// font-size: #fff;
			text{
				text-overflow:ellipsis;
				white-space:nowrap; 
				overflow:hidden; 
				display: inline-block;
				width: 70%;
				text-align: center;
				font-weight: 700;
			}
		}
		
		.back{
			float: left;
			display: inline-block;
			margin: 0px 15px 0 10px ;
			height: 24px;
			width: 30px;
			padding-top: 24rpx;
		}
	
	}
	.detail{
		position: relative;
		// padding-bottom: 100px;
		min-height: 620px;
		img{
			width: 100%;
			height: 544rpx;
			// z-index: 1;
		}
		.time{
			display: block;
			text-align: center;
			font-size: 24rpx;
			color:#9e9c9c;
			padding-bottom:20rpx;
			border-bottom: 1px solid #EEEDED;
			margin-bottom:30rpx
		}
		.content{
			top: 424rpx;
			min-height: 100rpx;
			width: 100%;
			position: absolute;
			background-color: #fff;
			border-radius: 25rpx 25rpx 0px 0px;
			padding: 20rpx auto;
			padding-bottom: 60rpx;
			.content_detail{
				margin: auto 20rpx;
			}
			.content_title{
				margin: 20rpx auto;
				text-align: center;
				font-size: 36rpx;
			}
			rich-text{
				color:#404040;
				font-size: 28rpx;
				line-height: 44rpx;
			}
		}
	}
	.footer{
		display: flex;
		justify-content: center;
		padding-top: 40rpx;
		padding-bottom: 100rpx;
		.give{
			width: 200rpx;
			height: 70rpx;
			line-height: 70rpx;
			border-radius: 35rpx;
			border: 3rpx solid #d2d1d1;
			display: flex;
			justify-content: center;
			margin: 10rpx 20rpx 10rpx 20rpx;
		}
		.icon-zanpress{
			width: 60rpx;
			height: 60rpx;
		}
		.icon-dianzan-active{
			width: 60rpx;
			height: 60rpx;
		}
		.icon-diancai{
			width: 60rpx;
			height: 60rpx;
			position: relative;
			top: 6rpx;
		}
		.icon-diancai-active{
			width: 60rpx;
			height: 60rpx;
			position: relative;
			top: 6rpx;
		}
	}
</style>
